<template>
	<view>
		<view class="box">
			<view class="re ip-img-warp">
				<swiper class="swiper_1" :autoplay="true" :interval="3000" :circular="true">
					<swiper-item v-for="image in product.photos">
						<image mode="heightFix" :src="image" class="banner_size"></image>
					</swiper-item>
				</swiper>
				<!-- <image src="@/static/icon_arrow_6.png" class="prev_page_pos vt"></image> -->
			</view>

			<view class="pa30">
			<!-- 	<view class="flex_box aic">
					<view class="item">
						<view class="fs36 fwb">{{product.product_name}}</view>
					</view>
					<view class="level_description_btn">等级说明</view>
				</view> -->
				<view class="mt30 r_area_block_1" v-for="item in prices" :key="item.level_id">
					<view class="flex_box aic">
						<view class="item"><text class="fs30">{{item.level_name}}</text> </view>
						<view class="fs30 ">
							<text class="ml25 fs24 cor_EC0">￥</text>
							<text class="fs30 cor_EC0">{{item.price}}</text>
							<text class="fs30 cor_aaa"> / {{item.unit}}</text>
						</view>
						<view class="ml-5" @click="toLs(item.level_id)">
							<image style="width: 30rpx;height: 30rpx;" src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/resource/line.png"></image>
							历史
						</view>
					</view>
					<view class="mt40 flex_box aic">
						<view class="fs30 item cor_aaa">预计赚：<text class=" fs24 cor_EC0">￥</text><text
								class="fs30 cor_EC0">
								{{(item.price * item.fhd_item.num).toFixed(2)}}
							</text></view>
						<view class="">
							<u-number-box v-model="item.fhd_item.num"></u-number-box>
						</view>
					</view>
				</view>
			</view>

			<!-- 合计 -->
			<view class="amount_money_fix">
				<view class="flex_box aic">
					<view class="item">
						<text class="ml25 fs30">合计：</text>
						<text class="fs24 cor_EC0">￥</text>
						<text class="fs48 fwb cor_EC0">{{getSumPrice()}}</text>
					</view>
					<view class="s_btn_1">继续添加</view>
					<view class="ml20 s_btn_2" @click="addFhd">加入发货单</view>
				</view>
			</view>

		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	import ljPointout from '@/components/lj-pointout/lj-pointout.vue'
	import { getProductPrice } from '@/api/product'
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
	import { navigateTo } from '@/utils/util'
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	import { log } from 'console'
	
	import  {hsdGet,hsdSet} from "@/utils/hsd.ts";
	


	const product = ref({ product_id: 0, photos: [] });
	const prices = ref([]);


	const addFhd = () => {
			prices.value.forEach(item => {
				if (item.fhd_item.num > 0) {
					hsdSet(item.fhd_item);
					item.fhd_item.num = 0;
				};
			});
		uni.redirectTo({url:'/pages/order/fhd'})
	}
	
	const toLs = (levelId:any) => {
		uni.navigateTo({
			url:`/pages/product/log?id=${product.value.product_id}&lid=${levelId}`,
		})
	}
	


	const getSumPrice = () => {
		let price = 0.00;
		prices.value.forEach(item => {
			price += (item.fhd_item.num * item.price);
		})
		// for (item in prices.value.forEach){
		// 	
		// }
		return price.toFixed(2);
	}



	const getProductPriceData = async (id : Number) => {
		let data = await getProductPrice({ id: id });
		product.value = data.product;
		prices.value = data.prices;
		uni.setNavigationBarTitle({title:data.product.product_name})
	}



	onLoad((option : any) => {
		getProductPriceData(option.id || 0);
	})
</script>

<style>
	page {
		background: #F4F6F8;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.ip-img-warp {
		background-color: #fff;
		text-align: center;
	}

	.banner_size {
		width: 100%;
		height: 450rpx;

	}

	.swiper_1 {
		height: 450rpx;
	}

	.amount_money_fix {
		position: fixed;
		width: 100%;
		padding: 22rpx 20rpx calc(22rpx + env(safe-area-inset-bottom));
		left: 0;
		bottom: 0;
		background: #fff;
		z-index: 5;
	}

	.level_description_btn {
		position: relative;
		width: 200rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(90deg, #FF791A 0%, #EF330C 100%);
		box-shadow: 0rpx 6rpx 20rpx 0rpx #FFAE9A;
		border-radius: 4rpx;
	}

	.s_btn_1 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 80rpx;
		font-size: 26rpx;
		color: #FF4907;
		/* box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41,255,154,0.5); */
		border-radius: 40rpx;
		border: 1rpx solid #FF4907;
	}

	.s_btn_2 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 80rpx;
		font-size: 26rpx;
		color: #fff;
		background: linear-gradient(180deg, rgba(255,73,7,.6) 0%, rgba(255,73,7,1) 100%);
		/* box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41, 255, 154, 0.5); */
		border-radius: 40rpx;
	}

	.r_area_block_1 {
		position: relative;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
</style>